<template>
  <div class = "disp-func" :class = "isShowFunc ? '':'noShowFunc'">
    <menu-option v-ref:option></menu-option>
  </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  import * as menuOption from '../components/menu-options.vue'
  import EchoTool from '../utils/echo-tool'

  export default {
    components: {
      menuOption
    },
    data () {
      return {
        isShowFunc: false
      }
    },
    watch: {
      isShowFunc: function (val, oldVal) {
        if (val === true) {
          if (EchoTool.EchoFunc.option.type === 'text') {
            this.$refs.option.optionText = EchoTool.EchoFunc.option.value
          } else if (EchoTool.EchoFunc.option.type === 'number') {
            this.$refs.option.optionNum = EchoTool.EchoFunc.option.value
          } else if (EchoTool.EchoFunc.option.type === 'range') {
            this.$refs.option.optionNum = EchoTool.EchoFunc.option.value
          } else if (EchoTool.EchoFunc.option.type === 'zone') {
            this.$refs.option.optionZone = EchoTool.EchoFunc.option.value
          } else if (EchoTool.EchoFunc.option.type === 'date') {
            this.$refs.option.optionData = EchoTool.EchoFunc.option.value
          } else if (EchoTool.EchoFunc.option.type === 'time') {
            this.$refs.option.optionTime = EchoTool.EchoFunc.option.value
          }
          this.$refs.option.optionObj = EchoTool.EchoFunc.selection
        }
      }
    },
    events: {
      [EchoKey.UP] (evt) {
        this.$refs.option.Up()
      },
      [EchoKey.DOWN] (evt) {
        this.$refs.option.Down()
      },
      [EchoKey.RIGHT_ENT] (evt) {
        EchoTool.EchoFunc.option.value = this.$refs.option.Enter()
        this.isShowFunc = false
      },
      [EchoKey.LEFT] (evt) {
      }
    }
  }
</script>

<style lang = "less">
  .disp-func {
    text-align: left;
    position: relative;
    top: -670px;
    font-size: 25px;
  }

  .noShowFunc {
    display: none;
  }
</style>
